<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>

    <div class="keys">
        <div class="key">
            <div>A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key">
            <div>S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key">
            <div>D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
        <div class="key">
            <div></div>
            <span class="sound"></span>
        </div>
    </div>

    <!-- 播放声音标签 -->
    <!-- vidio -->
    <audio src="./sounds/boom.wav" ></audio>
    <audio src="./sounds/clap.wav"></audio>
    <audio src="./sounds/hihat.wav"></audio>
    <audio src="./sounds/kick.wav"></audio>
    <audio src="./sounds/openhat.wav"></audio>
    <audio src="./sounds/ride.wav"></audio>
    <audio src="./sounds/snare.wav"></audio>
    <audio src="./sounds/tink.wav"></audio>
    <audio src="./sounds/tom.wav"></audio>

    <script>
    // 按A键的时候播放clap
    //  1. js 捕获按键事件
    //  js 是一个事件驱动的语言
    function playSound(event){
        console.log(event);
        if(event.key == 'a'){
            console.log('a');
        }
    }
    window.addEventListener('keydown', playSound);
    //  2. 播放clap
    </script>
</body>
</html>